<html>  
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>movies: </title>  
   <script src="./lib/prototype-1.6.0.3.js"></script>  
   <script src="./lib/jester.js"></script>  
<script>

function search(obj) {

	// then use it.
	Movie.find('all', {
		//id: obj.form.id.value
		//,
		title: $F('title')
		//,
		//director: obj.form.director.value
		//,
		//rating: obj.form.rating.value
	  },
	  function (results) {
		console.log(results);
		// Tbody
		var mybody=document.getElementById("moviestbody");

		var i ;
		for (i = 0; i < results.length; i++) {
			// create cell
			mycurrent_row=document.createElement("TR");
			//mycurrent_row.setAttribute("id","histrow"+i);

			mycurrent_cell=document.createElement("TD");
			mycurrent_cell.setAttribute("bgcolor","#FFCC99");
			currenttext=document.createTextNode(results[i].id);
			mycurrent_cell.appendChild(currenttext);
			mycurrent_row.appendChild(mycurrent_cell);

			mycurrent_cell=document.createElement("TD");
			mycurrent_cell.setAttribute("bgcolor","#FFCC99");
			currenttext=document.createTextNode(results[i].title);
			mycurrent_cell.appendChild(currenttext);
			mycurrent_row.appendChild(mycurrent_cell);

			mycurrent_cell=document.createElement("TD");
			mycurrent_cell.setAttribute("bgcolor","#FFCC99");
			currenttext=document.createTextNode(results[i].director);
			mycurrent_cell.appendChild(currenttext);
			mycurrent_row.appendChild(mycurrent_cell);

			mycurrent_cell=document.createElement("TD");
			mycurrent_cell.setAttribute("bgcolor","#FFCC99");
			currenttext=document.createTextNode(results[i].rating);
			mycurrent_cell.appendChild(currenttext);
			mycurrent_row.appendChild(mycurrent_cell);

			mybody.appendChild(mycurrent_row);
			
		}
	  }
	);

	//movie.find(1, console.log);
}

function read(obj) {
	Movie.find(1, 
	  function (result) {
		console.log(result);
		$('id').value = result.id;
		$('title').value = result.title;
		$('director').value = result.director;
		$('rating').value = result.rating;
	  }
	);
}

function create(obj) {
	var m = Movie.build({
		id: $F('id'),
		title: $F('title'),
		director: $F('director'),
		rating: $F('rating')
	});
	m.save();
}

function update(obj) {
	var m = Movie.find(
		$F('id'),
	  function (result) {
		console.log(results);
		result.id = $('id').value;
		result.title = $('title').value;
		result.director = $('director').value;
		result.rating = $('rating').value;
		result.save();
	  }
	);
}

function destory(obj) {
	var m = Movie.find(
		$F('id'),
	  function (result) {
		result.destory();
	  }
	);
}


</script>
</head>  

<body>

<p style="color: green">
<input type="button" name="search" value="search" onclick="search(this)" size="20"/>
<input type="button" name="read" value="read" onclick="read(this)" size="20"/>
<input type="button" name="create" value="create" onclick="create(this)" size="20"/>
<input type="button" name="update" value="update" onclick="update(this)" size="20"/>
<input type="button" name="delete" value="delete" onclick="destory(this)" size="20"/>
<br/>
id: <input type="input" name="id" id ="id" size="20"/><br/>
title: <input type="input" name="title" id="title" value="t2" size="20"/><br/>
director: <input type="input" name="director" id="director" size="20"/><br/>
rating: <input type="input" name="rating" id="rating" size="20"/><br/>
<form>
<table id="moviestable">
<tbody id="moviestbody">
<tr id="moviesheadertr">
<th>id</th><th>title</th><th>director</th><th>rating</th>
</tr>

<tr id="moviestr">
<td id="idTr"><!--id--></td><td id="titleTr"><!--title--></td><td id="directorTr"><!--director--></td><td id="ratingTr"><!--rating--></td>
</tr>

<tr id="logtr">
<textarea name="log" size="100" rows="10" cols="80">
</textarea>
</tr>
</tbody>
</table>
</form>
</p>
</body>
<script>

Resource.model('Movie', {
  prefix: '../restql/rest/json/entertainment',
  format: 'json',
  urls: {
	list: '/movies/title/:title',
	show: '/movies/show/:id'
  }
});
</script>

</html>  